<template>
    <rx-layout>
        <div slot="header" height="32px">
            <div class="table-operator" border="false">
                <a-button type="primary" icon="plus" @click="increase">
                    {{$ti18('rxList.addBtn','新建')}}
                </a-button>
                <a-button type="primary" icon="save" @click="saveAll">
                    {{$ti18('rxForm.saveBtn','保存')}}
                </a-button>
                <a-dropdown v-if="removeEnable&&selectedRowKeys.length > 0">
                    <a-button type="danger" icon="delete" @click="delById(selectedRows)">
                        {{$ti18('rxList.delBtn','删除')}}
                    </a-button>
                </a-dropdown>
            </div>
        </div>
        <div slot="center" border="false">
            <rx-fit>
                <rx-grid
                    ref="table"
                    bordered="false"
                    :allowRowSelect="true"
                    :multiSelect="true"
                    :showPage="false"
                    :columns="columns"
                    :defaultPageSize="10"
                    :enableHtmlEscape="false"
                    :pageSizeOptions="['10','30','40']"
                    id-field="rkId"
                    @selectChange="onSelectChange"
                    :dataSource="dataSource"
                >
               <span slot="i18nJson" slot-scope="{text,record,index,blur}">
                 <rx-input-i18n v-model="record.i18nJson" />
              </span>
                    <span slot="key" slot-scope="{text,record,index,blur}">
                <a-input v-model="record.key"/>
              </span>
                    <span slot="level" slot-scope="{text,record,index,blur}">

                <a-input-number v-model="record.level"/>
              </span>
                    <span slot="action" slot-scope="{text, record}" class="actionIcons">
                  <span @click="confirm(record)">
                      {{$ti18('rxForm.saveBtn','保存')}}
                  </span>
                  <span v-if="removeEnable" @click="delById([record])">
                      {{$ti18('rxList.delBtn','删除')}}
                  </span>
              </span>
                </rx-grid>

            </rx-fit>
        </div>
    </rx-layout>

</template>

<script>
    import OsRankTypeApi from '@/api/user/org/osRankType'
    import OsRankTypeEdit from './OsRankTypeEdit.vue'
    import {RxLayout, RxFit, RxGrid, BaseList, Util} from "@lowcode/jpaas-common-lib"
    import FormBoListApi from "@/api/form/core/formBoList";
    import BpmDefApi from "@/api/bpm/core/bpmDef";

    export default {
        name: 'TableList',
        mixins: [BaseList],
        props: {
            dimId: String
        },
        components: {
            RxLayout,
            RxFit,
            RxGrid
        },
        data() {
            return {
                idx_: 1,
                dataSource: [],
                // 表头
                columns: [
                    {
                        title: this.i18n('form.levelName', '等级名称'),
                        dataIndex: 'i18nJson',
                        scopedSlots: {customRender: 'i18nJson'}
                    },
                    {
                        title: this.i18n('form.levelKey', '等级Key'),
                        dataIndex: 'key',
                        scopedSlots: {customRender: 'key'}
                    },
                    {
                        title: this.i18n('form.level', '级别'),
                        dataIndex: 'level',
                        scopedSlots: {customRender: 'level'}
                    },
                    {
                        title: this.$ti18('rxList.action', '操作'),
                        width: 180,
                        dataIndex: 'action',
                        scopedSlots: {customRender: 'action'}
                    }
                ],
                component: OsRankTypeEdit,
                comment: this.i18n('list.dimensionLevel', '维度等级'),
                widthHeight: ['800px', '400px']
            }
        },
        created() {
            //一开始默认10条
            this.OsRankType();
        },
        methods: {
            i18n(name, text, key) {
                return this.$ti18(name, text, "osDimension", key);
            },
            //获取数据
            OsRankType() {
                OsRankTypeApi.getByDimId(this.dimId).then(data => {
                    this.dataSource = data;
                }).catch(res => {
                })
            },
            //增加
            increase() {
                var obj = {
                    isAdd: true,
                    i18nJson: '',
                    key: '',
                    level: '',
                    rkId: this.idx_++,
                    dimId: this.dimId
                }
                this.dataSource.unshift(obj)
            },
            //保存多条记录
            saveAll() {
                let self = this;
                for (var i = 0; i < this.dataSource.length; i++) {
                    let record = this.dataSource[i];
                    if (!this.valid(record)) {
                        this.$message.error(this.i18n('form.levelNameOrLevelKey', '等级名称、等级Key以及级别', 'write'))
                        return;
                    }
                    if (record.isAdd) {
                        record['rkId'] = "";
                    }
                }
                OsRankTypeApi.saveAll(this.dataSource).then(res => {
                    self.OsRankType();
                });
            },
            valid(record) {
                if (!record.key || !record.i18nJson || !record.level) {
                    return false;
                }
                return true;
            },
            //确定
            confirm(record) {
                if (!this.valid(record)) {
                    this.$message.error(this.i18n('form.levelNameOrLevelKey', '等级名称、等级Key以及级别', 'write'))
                    return;
                }
                if (record.isAdd) {
                    record['rkId'] = "";
                }
                OsRankTypeApi.save(record).then(res => {
                    this.selectedRowKeys = [];
                    this.selectedRows = [];
                    this.$refs.table.updateRow(record, {isAdd: false, ...res.data});
                });
            },
            //一开始调用数据
            getListByParams(parameter) {
                return OsRankTypeApi.query(parameter)
            },
            // 删除
            delById(rows) {
                let self = this;
                this.$confirm({
                    zIndex: 20000,
                    okText: this.$ti18('rxForm.okBtn', '确认'),
                    cancelText: this.$ti18('rxForm.cancelBtn', '取消'),
                    title: this.i18n('form.wantToDelete', '确定要删除？'),
                    content: h => this.i18n('form.deleteDimensionLevel', '删除维度等级？'),
                    onOk() {
                        let selectKeys = [];
                        let ids = [];
                        for (var i = 0; i < rows.length; i++) {
                            if (!rows[i].isAdd) {
                                ids.push(rows[i].rkId);
                            }
                            selectKeys.push(rows[i].rkId);
                        }
                        self.selectedRowKeys = [];
                        self.selectedRows = [];
                        if (ids.length == 0) {
                            self.$refs.table.removeRows(selectKeys);
                            return;
                        }
                        OsRankTypeApi.del({ids: ids.join(',')}).then(res => {
                            self.$refs.table.removeRows(selectKeys);
                        })
                    }
                });
            },
            handleEdit(conf) {
                var pk = conf.rkId;
                var self_ = this;
                var baseConf = {
                    "curVm": self_,
                    "data": {
                        "pkId": pk, "dimId": this.dimId, callback: function (data) {
                            console.info(data);
                        }
                    }
                };
                let config = Object.assign(baseConf, conf);
                if (!this.widthHeight) {
                    config.max = true;
                } else {
                    config.widthHeight = this.widthHeight
                }
                Util.open(config, function (action) {
                    if (action == "ok") {
                        self_.refreshGrid();
                    }
                });
            }
        }
    }
</script>
